import { Button, Calendar, CapsuleTabs, Input } from "antd-mobile"
import { useState } from "react";
import style from "./style.module.css";
const List=()=>{
  const [show, setShow] = useState(false);
  const [selectDate, setSelectDate] = useState("");
  const start = localStorage.getItem("start") || "";
  const end = localStorage.getItem("end") || "";
  const onConfirm = (date) => {
    setShow(false);
    setSelectDate(new Date(date).toLocaleDateString());
  };
    return <div>
        <CapsuleTabs>
        <CapsuleTabs.Tab  title='火车' key='火车'>
        <div className={style["top"]}>
        <div className={style["item"]}>
          <Input
            value={start}
            className={style["input"]}
            placeholder="开始"
            style={{ textAlign: "center" }}
          ></Input>
          -
          <Input
            value={end}
            className={style["input"]}
            placeholder="结束"
            style={{ textAlign: "center" }}
          ></Input>
        </div>
        <div className="date">
          <Input
            className={style["input"]}
            value={selectDate}
            placeholder="请选择日期"
            onClick={() => setShow(true)}
          ></Input>
          <Calendar visible={show} onConfirm={onConfirm}></Calendar>
        </div>
        <div>
          <Button
            type="primary"
            block
            round
          >
            查询
          </Button>
        </div>
      </div>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='汽车' key='汽车'>
            汽车
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='飞机' key='飞机'>
            飞机
          </CapsuleTabs.Tab>
        </CapsuleTabs>
    </div>
}
export default List